<template>
  <div id="userLayout" :class="{en: $store.state.app.lang === 'en-US'}">
    <div class="container" v-if="!isMdnLoading">
      <section class="user-layout-content">
        <div class="show-image">
          <!-- 加个反白 -->
          <div class="logo-box">
            <img
              v-if="logoUrl"
              :src="logoUrl"
              class="logo"
              alt="logo"
            >
          </div>
        </div>
        <div class="main">
          <div class="title" v-if="!isForget">
            <!-- <div><span>电子知情同意系统</span></div> -->
            <div>{{ $t('all.autotext198') }}</div>
          </div>
          <!-- <div v-if="!isForget" class="tip">成就生命美好 · 缔造无限可能</div> -->

          <forget v-if="isForget"></forget>
          <login-form v-else @recieptLoading="loadingStart"></login-form>
          <section class="copyright">
            <section class="user-layout-version">
              <span>{{ $t('all.autotext913') }}：V{{ version }}</span>
              <section class="user-layout-lang">
                <select-lang class="select-lang-trigger"/>
              </section>
            </section>
            <span>Copyright © 2024 {{ cYear }} {{ $t('all.autotext1366') }}</span>
          </section>
          <webkit-model ref="webkitModel"></webkit-model>
        </div>
      </section>
    </div>
    <div
      style="display: flex;align-items: center;justify-content: center;height: 100vh;"
      v-if="isMdnLoading"
    >
      <a-spin tip="加载中..."></a-spin>
    </div>
  </div>
</template>

<script>
import SelectLang from '@/components/SelectLang'
import LoginForm from './loginForm'
import Forget from './forget'
import webkitModel from './webkit-model.vue'
// import DevicePixelRatio from '@/utils/devicePixelRatio'
import i18nMixin from '@/store/i18n-mixin'
// import { getCurrentVersion, getServerTime } from '@/utils/util'

export default {
  name: 'UserLayout',
  components: { LoginForm, Forget, webkitModel, SelectLang },
  mixins: [i18nMixin],
  data () {
    return {
      isForget: false,
      cVersion: '',
      cYear: '',
      isMdnLoading: false,
      privacyUrl: location.origin + '/privacy',
      deviceInstance: null,
      logoUrl: 'https://minio-cluster.primelifescience.com.cn/consent/c21a6ef1-274c-4fce-9104-5431b742a19b.svg'
    }
  },
  computed: {
    version () {
      return this.$store.getters.version
    }
  },
  methods: {
    // 有theme参数的访问, 指向专用的页面主题
    // 先判断缓存里有没有主题, 如果有就先用, 但也要请求后端问问
    loadingStart () {
      this.isMdnLoading = true
    }
  },
  async created () {
    // this.cVersion = await getCurrentVersion(this)
    // this.cYear = await getServerTime()
    // 判断是否为谷歌浏览器内核
    const isChromeBasedBrowser = navigator.userAgent.includes('Chrome')
    // console.log('isChromeBasedBrowser', navigator.userAgent)
    if (!isChromeBasedBrowser) {
      this.$refs.webkitModel.visible = true
    }
  },
  beforeDestroy () {
    // 重置监听事件
    this.deviceInstance && this.deviceInstance.reset()
  }

}
</script>

<style lang="less" scoped>
#userLayout {
  --primary-color: #0087e1;
  --aux-color1: #0087e1;
  --aux-color2: #0087e1;
  --aux-color3: #0087e1;
}
#userLayout {
  height: 100%;
  font-family: PingFangSC-Regular;
  .container {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .user-layout-version {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .user-layout-lang {

      .select-lang-trigger {
        cursor: pointer;
        padding: 6px 12px;
        line-height: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        vertical-align: middle;
      }
    }
    .user-layout-content {
      display: flex;
      width: 100%;
      height: 100%;
      box-shadow: 0 40px 70px -20px rgba(0, 88, 200, 0.2);

      .show-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        // height: 100%;
        background: linear-gradient(147.38deg, #6DDCFB 0%, rgba(0, 135, 225, 0.8) 50%, #004573 100%);
        .logo-box {
          overflow: hidden;
        }
        .logo {
          height: 70px;
          // transform: translateX(-600px);
          // svg图片反白
          // filter: drop-shadow(#fff 600px 0px 0px);
        }
      }

      .main {
        display: flex;
        position: relative;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        width: 32%;
        padding: 40px 80px;
        .prime-logo {
          width: 128px;
          margin-bottom: 20px;
        }

        .title {
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 32px;
          font-weight: 400;
          line-height: 40px;
          background: linear-gradient(
            147.38deg,
            var(--aux-color1) 0%,
            var(--aux-color2) 49%,
            var(--aux-color3) 100%
          );
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent;
        }
        .tip {
          text-align: center;
          margin-top: 5px;
          color: rgba(104, 121, 145, 1);
        }

        h1 {
          margin-bottom: 0;
          span {
            font-weight: bold;
            font-size: 30px;
          }

          em {
            font-weight: bold;
            color: #1cc2fd;
            font-style: normal;
            font-size: 23px;
          }
        }

        h2 {
          font-weight: bold;
          color: #0f121b;
          font-size: 23px;
          margin-bottom: 0;
        }
      }
    }

    .copyright {
      margin: auto;
      color: #abb8ce;
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;
      opacity: 1;
      bottom: 0px;
      font-size: 12px;
      font-weight: 400;
      padding-bottom: 15px;
      span {
        display: block;
        cursor: pointer;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
